<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按钮 - 在线演示 - Layui</title>
        <style>

            body{
                margin: 0;
                padding:0;
            }
            .layui-elem-field{
                border-color: #e6e6e6;
            }
            .layui-elem-field{
                padding: 0;
                border-width: 1px;
                border-style: solid;
            }
            .site-demo-button .layui-btn{
                margin-bottom: 30px;
            }
            .layui-btn{
                margin: 0 7px 10px 0;
            }
            .layui-btn {
                display: inline-block;
                height: 38px;
                line-height: 38px;
                padding: 0 18px;
                background-color: #009688;
                color: #fff;
                white-space: nowrap;
                text-align: center;
                font-size: 14px;
                border: none;
                border-radius: 2px;
                cursor: pointer;
                outline: none;
            }
            .layui-btn-primary {
                border: 1px solid #C9C9C9;
                background-color: #fff;
                color: #555;
            }
            .site-demo-button div {
                margin: 20px 30px 10px;
            }
            .layui-btn-normal{
                background-color: #1E9FFF;
            }
            .layui-btn-warm{
                background-color: #FFB800;
            }
            .layui-btn-danger{
                background-color: #FF5722;
            }
            .layui-btn-disabled{
                background-color: #FBFBFB;
                cursor: not-allowed;
                color: #C9C9C9;
                opacity: 1;
                border: 1px solid #e6e6e6;
            }
            button{
                text-rendering: auto;
                color: initial;
                letter-spacing: normal;
                word-spacing: normal;
                text-transform: none;
                text-indent: 0px;
                text-shadow: none;
                display: inline-block;
                text-align: start;
                margin: 0em;
                font: 400 13.3333px Arial;
            }

        </style>

    </head>

    <body>

    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
        <legend>按钮主题</legend>
        <div>
            <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
            <button type="button" class="layui-btn">默认按钮</button>
            <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
            <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
            <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
            <button type="button" disabled="disabled" class="layui-btn layui-btn-disabled">禁用按钮</button>
        </div>
    </fieldset>

    </body>
</html>